<template>
	<view class="mine-info-page" :style="{marginTop: navMarTop * 2 + 10 + 'rpx'}">
		<!-- 个人信息模块啊 -->
		<view class="new-mine-info">
			<!-- 头像 -->
			<view class="my-info">
				<view class="my-image" @click="chooseImage">
					  <view class="flex-row justify-between align-center" style="width:100%">
					    <view class="flex-row align-center"  style="width:100%">
					      <l-avatar :avatar="userInfo ? userInfo.avatar : ''" :size="'138rpx'"/>
					    </view>
					  </view>
					<!-- <image :src="userInfo ? userInfo.avatar : ''" lazy-load style="width: 100%;height: 100%;"></image> -->
				</view>
			</view>
			<!-- 车企名称 -->
			<view v-if="userId" class="automobile-enterprise-name" @click="showModal=true">
				<view style="width:fit-content;line-height: 40rpx;" class="name-info">
					{{userInfo.nickname + ',您好' || companyInfo.idCardName + ',您好'}}
				</view>
				<image style="width: 28rpx;height: 28rpx;margin-left: 24rpx;" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/mine-go.png" mode="widthFix"></image>
				<tui-modal :show.sync="showModal" @click="modalClick">
				  <view class="input-box">
				    <input v-model="name" :maxlength="16" placeholder="请输入昵称" type="text">
				  </view>
				</tui-modal>
			</view>
      <view v-else class="automobile-enterprise-name" @click="toLogin">
        <view style="width:fit-content;line-height: 40rpx;" class="name-info">
          登录/注册
        </view>
        <image style="width: 28rpx;height: 28rpx;margin-left: 24rpx;" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/mine-go.png" mode="widthFix"></image>
      </view>
			<view class="automobile-enterprise-corporation">
				{{ userInfo ? userInfo.companyName : '' }}
			</view>
		</view>
		<!-- 收入模块 -->
		<view class="income">
			<view class="income-nav">
				<view class="income-title">
				  <image style="width: 28rpx;height: 28rpx;margin-right: 10rpx;" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb-admin-uniapp/income.png" mode="widthFix"></image> 收入
				</view>
				<view class="income-ico" @click="jump('/user/statistics/statistics')">
					<image style="width: 28rpx;height: 28rpx;" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb-admin-uniapp/go-righ.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="income-info">
				<view class="income-info-list" v-for="(item,index) in income">
					<view class="list-name">
						{{item.title}}
					</view>
					<view class="list-value">
						{{item.value.toFixed(2)}}<span style="margin-left: 10rpx;display: inline-block;width: fit-content;">{{item.title == '总订单数' ? '笔' : '元'}}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters, mapMutations } from 'vuex'
	import { updateUserInfo, getUserInfo } from '@/common/api/user'
	import { summary, fetchVehicleOrderSummary } from '@/common/api/statistics.js'
	import { dateFormat, jump, saveImage } from '@/common/util'
	export default{
		data(){
			const startTime = dateFormat(new Date().setDate(1))
			const endTime = dateFormat()
			let immerse = false
			/* #ifdef APP-PLUS*/
			immerse = true
			/* #endif*/
			return{
				startTime,
				endTime,
				immerse,
				income:[{
					title:'总收入',
					value:0
				},{
					title:'车均收入',
					value:0
				},{
					title:'总订单数',
					value:0
				},{
					title:'平均单价',
					value:0
				}],
				showModal: false,
				name: '',
				navMarTop:''
			}
		},
		computed:{
			...mapGetters({
			  userId: 'userId',
			  userInfo: 'userInfo',
			  companyInfo: 'companyInfo'
			})
		},
		created() {
			console.log('2')
			this.fetchOrderSummery()
			this.navMarTop = uni.getMenuButtonBoundingClientRect().bottom
		},
		methods:{
			goIncome(){
				uni.navigateTo({
					url:'user/statistics/statistics'
				})
			},
      toLogin() {
        jump('/passport/password-login/password-login', 'reLaunch')
      },
			async fetchOrderSummery() {
				console.log('2')
			  const [err, res] = await summary({
			    startTime: this.startTime + ' 00:00:00',
			    endTime: this.endTime + ' 23:59:59'
			  })
			  uni.stopPullDownRefresh()
			  if (!this.$http.errorCheck(err, res)) return false
			  const data = res.data.data
			  console.log(data)
			  await this.fetchVehicleOrderSummary(data.totalAmount)
			  this.income[0].value = data.totalAmount
			  this.income[2].value = data.total

			  if (data.total != '0') this.income[1].value =  data.totalAmount / data.total
			  else this.income[1].value = 0

			},
			async fetchVehicleOrderSummary(totalAmount) {
			  const [err, res] = await fetchVehicleOrderSummary({
			    startTime: this.startTime + ' 00:00:00',
			    endTime: this.endTime + ' 23:59:59',
			    start: 0,
			    limit: 9999
			  })
			  if (!this.$http.errorCheck(err, res)) return false
			  const data = res.data.data
			  if (data.length) this.income[3].value = totalAmount / data.length
			  else this.income[3].value = 0
			},
			// 选择图片
			chooseImage() {
				if (this.userId) {
					saveImage('user').then(avatar => {
					  this.updateInfo({
					  userId: this.userId,
					  avatar
					  })
					}).catch(err => {
					  this.showModal = true
					  this.errMsg = err
					})
				}else {
					this.toLogin()
				}
			  
			},
			// 修改用户信息,手机号和用户名不能通过此接口修改
			async updateInfo(e) {
			  const [err, res] = await updateUserInfo(e)
			  if (!this.$http.errorCheck(err, res)) return false
			  this.toast('修改成功')
			  await this.getUserInfo()
			},
			async getUserInfo() {
			  const [err, res] = await getUserInfo()
			  if (!this.$http.errorCheck(err, res)) return false
			  const uerInfo = res.data.data.sysUser
			  this.setUserInfo(uerInfo)
			},
			...mapMutations({
			  setUserInfo: 'user/setUserInfo'
			}),
			// 修改名称
			modalClick(e) {
			  if (e.index) {
			    if (!this.name) {
			      this.toast('请输入昵称')
			      return
			    }
				this.updateInfo({
					userId: this.userId,
					nickname: this.name
				})
			  }
			  this.name = ''
			  this.showModal = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine-info-page{
		width: 100%;
		padding:0rpx 32rpx;
		box-sizing: border-box;
		// margin-top: 115rpx;
		.new-mine-info{
			width: 100%;
			background-color: #fff;
			padding:0rpx 32rpx 20rpx;
			box-sizing: border-box;
			position: relative;
			border-radius: 18rpx;
			border: 2rpx solid #fff;
			.my-info{
				width: 142rpx;
				height: 142rpx;
				border-radius: 100%;
				overflow: hidden;
				box-sizing: border-box;
				border: 2rpx solid #fff;
				position: absolute;
				left: 30rpx;
				top: -65rpx;
				.my-image{
					width: 100%;
					height: 100%;
				}
			}
			.automobile-enterprise-name{
				width: 100%;
				font-size: 40rpx;
				font-weight: 400;
				color: rgba(0,0,0,0.9);
				line-height: 40rpx;
				margin-top: 92rpx;
				display: flex !important;
				justify-content: flex-start !important;
				align-items: center !important;
				flex-direction: row !important;
			}
			.automobile-enterprise-corporation{
				margin-top: 20rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0,0,0,0.3);
				line-height: 28rpx;
			}
		}
		.income{
			width: 100%;
			background-color: #fff;
			box-sizing: border-box;
			position: relative;
			border-radius: 18rpx;
			margin-top: 20rpx;
			overflow: hidden;
			border: 2rpx solid #2C3137FF;
			.income-nav{
				width: 100%;
				background: linear-gradient(161deg, #2C3137FF 0%, #2C3137FF 100%), linear-gradient(90deg, #2C3137 0%, #4E525B 100%);
				display: flex;
				flex-direction: row !important;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 30rpx;
				.income-title{
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;
					display: flex;
					flex-direction: row;
					align-items: center;
				}
				.income-ico{
					width: 28rpx;
					height: 28rpx;
				}
			}
			.income-info{
				width: 100%;
				display: flex;
				flex-direction: row !important;
				justify-content: space-between;
				align-items: center;
				 flex-wrap: wrap !important;
				 box-sizing: border-box;
				 padding: 40rpx 30rpx;
				.income-info-list{
					width: 46%;
					display: flex;
					flex-direction: row !important;
					 justify-content: space-between;
					 align-items: center;
					 margin-bottom: 40rpx;
					 .list-name,.list-value{
						 font-size: 28rpx;
						 font-weight: 400;
						 color: rgba(0,0,0,0.4);
						 line-height: 28rpx;
					 }
					 .list-value{
						 color: #000000E6;
						 display: flex;
						 flex-direction: row !important;
						 align-items: center;
					 }
				}
				.income-info-list:nth-child(3){
					margin-bottom: 0;
				}
				.income-info-list:nth-child(4){
					margin-bottom: 0;
				}
			}
		}
	}
</style>
